<template>
<div>
  <!--标题-->
  <div class="card-header">
    <span>{{title}}</span>
    <svg t="1644927302608" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2100" width="16" height="16"><path d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0zM423.936 833.536c-35.328 0-59.904-16.896-59.904-53.76 0-47.104 33.28-127.488 40.448-144.384l68.608-173.056c6.656-17.408-2.048-26.624-9.728-26.624-36.352 0-83.456 85.504-100.864 85.504-6.656 0-12.8-6.656-12.8-12.8 0-17.92 43.008-58.88 55.808-71.68C444.928 399.36 495.616 371.2 552.96 371.2c41.984 0 87.552 25.6 52.224 120.832l-70.656 191.488c-5.632 14.848-16.896 39.424-16.896 54.784 0 6.656 4.096 13.824 11.776 13.824 29.184 0 83.456-83.456 97.28-83.456 5.12 0 11.776 6.144 11.776 14.848-0.512 28.16-115.2 150.016-214.528 150.016z m168.96-497.664c-40.448 0-66.56-26.624-66.56-66.56 0-43.008 37.376-78.336 80.384-78.336 39.424 0 67.584 26.624 67.584 66.56 0 45.056-37.376 78.336-81.408 78.336z" p-id="2101"></path></svg>
  </div>
  <!--内容-->
  <div class="card-content">{{ count }}</div>
  <!--图表-->
  <div class="card-carts">
    <slot name="carts"></slot>
  </div>
  <!--底部-->
  <div class="card-footer">
    <slot name="footer"></slot>
  </div>
</div>
</template>

<script>
export default {
  name: 'index',
  props:['title','count'],
}
</script>

<style scoped>
.card-header{
  display: flex;
  justify-content: space-between;
  color: #d9d9d9;
}
.card-content{
  font-size: 30px;
  padding:10px 0;
}
.card-carts{
  height: 50px;
}
.card-footer{
  border-top: 1px solid #eee;
  padding-top: 10px;
  font-size: 14px;
}
</style>
